<template>
  <div class="swiper mySwiper miaosha">
    <div class="ms_title">
      <strong>猜你喜欢</strong>
    </div>
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="item in opt"
        :key="item.id"
        @click="clickItem(item.id)"
      >
        <div class="good-img">
          <img v-lazy="item.pic" alt="" />
          <p class="activity">
            <van-icon name="fire" color="#fff" />热度:{{ item.views }}
          </p>
        </div>
        <p class="good-price">￥ {{ item.minPrice }}</p>
        <p class="good-oldprice">￥ {{ item.minPrice * 2 }}</p>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  props: ['opt'],
  mounted () {
    // eslint-disable-next-line no-new
    new Swiper('.mySwiper', {
      slidesPerView: 3,
      spaceBetween: 30,
      freeMode: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  },
  methods: {
    clickItem (id) {
      // 点击商品,跳转到详情页
      this.$emit('clickItem', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.miaosha {
  background: #fff;
  margin-top: 0.3rem;
  padding: 0.2rem 0;
  border-radius: 0.2rem;
  strong {
    font-size: 0.36rem;
    line-height: 0.5rem;
    font-weight: 700;
    padding-left: 0.2rem;
    margin-bottom: 0.2rem;
  }
  .good-img {
    position: relative;
    margin: 0.2rem auto 0;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid #999;
    border-radius: 0.15rem;
    overflow: hidden;
    img {
      width: 1.6rem;
      height: 1.6rem;
    }
    p {
      position: absolute;
      left: 0;
      top: 0;
      padding-left: 0.1rem;
      background: red;
      color: #fff;
      font-size: 0.16rem;
    }
  }
  .van-swipe-item {
    text-align: center;
  }
  .good-price {
    color: red;
    font-weight: 700;
    font-size: 0.35rem;
    line-height: 0.45rem;
    text-align: center;
  }
  .good-oldprice {
    text-align: center;
    text-decoration: line-through;
    font-size: 0.18rem;
    color: #666;
  }
}
</style>
